<template>
  <div>
    <el-table v-loading="loading" :data="datas" style="width: 100%">
      <el-table-column label="名称">
        <template slot-scope="scope">
          <el-tooltip effect="dark" :content="scope.row.title" placement="bottom-start">
            <div class="course-title">{{ scope.row.title }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="type_text" label="类型" />
      <el-table-column label="消费金额">
        <template slot-scope="scope">
          {{ scope.row.payment | moneySymbol }}
        </template>
      </el-table-column>
      <el-table-column prop="from_text" label="订单来源" />
      <el-table-column prop="payment_time" label="购买时间" />
    </el-table>
    <el-row v-if="total > 0" type="flex" justify="end" class="pagination">
      <el-pagination
        :current-page.sync="paginate.page"
        :page-size="paginate.count"
        :page-sizes="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </el-row>
  </div>
</template>

<script>
import site from '@/site.js'

export default {
  data() {
    return {
      response: null,
      loading: true,
      paginate: {
        count: 10,
        page: 1
      },
      pageSize: site.page_sizes
    };
  },
  computed: {
    datas() {
      if (this.response) {
        return this.response.data;
      }
      return [];
    },
    total() {
      if (this.response) {
        return this.response.total;
      }
      return 0;
    }
  },
  created() {
    this.loadData();
  },
  methods: {
    handleCurrentChange: function(page) {
      this.paginate.page = page;
      this.loadData();
    },
    loadData: function() {
      this.$http.get(
        '/user/admin/account/' + this.$route.params.id + '/buyLogs',
        {
          ...this.paginate
        },
        response => {
          this.response = response.data;
          this.loading = false;
        },
        _ => {
          this.loading = false;
        },
        false
      );
    }
  }
};
</script>

<style scoped>
.course-title {
  width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pagination{
  padding: 20px 0;
}
</style>
